<!--
  - Copyright(c)  2022 厦门外里科技有限公司 All rights reserved.
  -
  - https://www.wailikeji.com
  -
  - 版权所有，侵权必究！
  -->

<template>
	<view class="scrool-page">
		<view class="header">
			<u-search style="padding: 30upx; background-color: #4fc08d;" placeholder="输入关键词搜索微信群" v-model="keyword"
				@change="searchHandle" :action-style="{color: '#FFFFFF'}">
			</u-search>
			<u-notice-bar mode="horizontal" :list="noticeList"></u-notice-bar>
		</view>
		<view class="wrap">
			<!-- 切换卡 -->
			<view class="u-tabs-box">
				<!-- is-scroll(默认为true)，配置tabsSwiper组件的内容是否可以左右拖动,一般4个标签以下时，无需拖动，设置为false，
            5个标签以上，建议可以左右拖动-->
				<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="swiperItemList" :current="current"
					@change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(swiperItem, swiperIndex) in swiperItemList"
					:key="swiperItem.id">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="loadMore"
						lower-threshold="10upx">
						<view class="page-box">
							<view class="order" v-for="(item, index) in swiperItem.itemList" :key="item.id">
								<view class="item">
									<view class="left">
										<image :src="item.wxUrl.substr(0, 4) === 'http'? item.wxUrl:(baseUrl+item.wxUrl)" mode="aspectFill"></image>
									</view>
									<view class="content">
										<view class="box">
											<view class="test">
												<view class="title u-line-2" style="display: flex;">
													<view v-if="item.topTime"
														style="background-color: #f4e076; color: red;  width: 100upx; margin-right: 10upx;">
														↑ 置顶
													</view>
													{{ item.name }}
												</view>
												<view class="number">
													<u-icon name="../../static/images/group.png" :size="28"
														color="rgb(94,94,94)"></u-icon>&nbsp;&nbsp;
													{{ item.curNum }}人&nbsp; | &nbsp;{{ getTime(item.createTime) }}
												</view>
											</view>
											<view class="right">
												<u-button class="join" :type="getBtnType(item)"
													@click="joinHandle(item)">
													{{getBtnDesc(item)}}
												</u-button>
											</view>
										</view>
										<!-- <u-line color="#cecbd0" length="93%" /> -->
									</view>

								</view>

							</view>
							<u-loadmore v-if="swiperItem.itemList.length>=10"
								:status="getCurSwiperItem(swiperItem.id).loadStatus" bgColor="#f2f2f2">
							</u-loadmore>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<u-popup class="qrcode" v-model="show" mode="bottom" :closeable="true" border-radius="30">
			<view class="title" style="font-size:40upx ;margin-top: 40upx; text-align: center;">扫码加群</view>
			<view style="height: 600upx; border-radius: 30upx; margin: 30upx 100upx; ">
				<u-image style="height: 100%; width: 100%;" mode="widthFix" :src="erweima">
					<u-loading slot="loading"></u-loading>
				</u-image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		API_URL
	} from '@/env'

	export default {
		data() {
			return {
				baseUrl: API_URL,
				keyword: "",
				noticeList: ['本平台每天更新1000+微信群，100+企业微信群，超过七天后的群已过期，请进最新的群！'],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				show: false, //弹出层
				erweima: '../../static/qun.png',
				swiperItemList: [{
						id: 0,
						name: '实时更新', //标题
						loadStatus: 'loadmore', //加载状态
						curPage: 0, //当前页码
						itemList: []
					},
					{
						id: 1,
						name: '百人群',
						loadStatus: 'loadmore',
						curPage: 0,
						itemList: []
					},
					{
						id: 2,
						name: '企业微信群',
						loadStatus: 'loadmore',
						curPage: 0,
						itemList: []
					},
				],
			};
		},
		onLoad() {

		},
		onShow() {
			if (this.getCurSwiperItem().itemList.length == 0) {
				this.loadMore()
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.refresh()
		},
		methods: {
			getBtnType(item) {
				if (this.$store.state.user.userInfo && this.$store.state.user.userInfo.userId &&
					item.userId == this.$store.state.user.userInfo.userId) {
					return "primary"
				}
				if (item.status == 1) {
					return "error"
				}
				if (item.isAlreadySee) {
					return "warning"
				} else {
					return "success"
				}
			},
			getBtnDesc(item) {
				if (this.$store.state.user.userInfo && this.$store.state.user.userInfo.userId &&
					item.userId == this.$store.state.user.userInfo.userId) {
					return "我的"
				}
				if (item.status == 1) {
					return "免费"
				}
				if (item.isAlreadySee) {
					return "已查看"
				} else {
					return "加群"
				}
			},
			/**
			 * 获取几天前
			 */
			getTime(dateStr) {
				return this.$tools.getTimeInterval(new Date(dateStr).getTime(), new Date().getTime())
			},
			/**
			 * 点击加入
			 */
			joinHandle(item) {
				if (item.cloudUrl) {
					this.show = true
					this.erweima = item.cloudUrl.substr(0, 4) === 'http'? item.cloudUrl:(this.baseUrl + item.cloudUrl)
					return
				}
				this.$api.apiPath('qunQrcode.seeQrcode', "/" + item.id)
					.then(res => {
						console.log("进入信息", res)
						if (res.code == 200) {
							this.show = true
							this.erweima =res.data.cloudUrl.substr(0, 4) === 'http'? res.data.cloudUrl:(this.baseUrl + res.data.cloudUrl)
							item.isAlreadySee = true
						} else {

						}
					})
			},
			/**
			 * 搜索
			 * @param {Object} keyword
			 */
			searchHandle(keyword) {
				this.keyword = keyword
				this.refresh()
			},
			/**
			 * 刷新
			 */
			refresh() {
				this.getCurSwiperItem().itemList = []
				this.getCurSwiperItem().curPage = 0
				this.getCurSwiperItem().loadStatus = 'loadmore'
				this.loadMore()

			},
			/**
			 * 获取当前活跃选项卡数据
			 * @param {Object} current
			 */
			getCurSwiperItem(current) {
				if (current) {
					return this.swiperItemList[current];
				}
				return this.swiperItemList[this.current];
			},
			/**
			 * 加载更多
			 */
			loadMore() {
				if (this.getCurSwiperItem().loadStatus == 'nomore') {
					return
				}
				//加载中
				this.getCurSwiperItem().loadStatus = 'loading';
				let page = this.getCurSwiperItem().curPage + 1
				this.$api.api('qunQrcode.list', {
						"name": this.keyword,
						"pageNum": page,
						"pageSize": 10,
						"status": 0,
						"orderByColumn": "createTime",
						"isAsc": "descending",
						"type": this.current
					})
					.then(res => {
						if (res.code == 200) {
							this.swiperItemList[this.current].itemList = this.swiperItemList[this.current].itemList
								.concat(res.rows)
							if (res.total > this.swiperItemList[this.current].itemList.length) {
								this.getCurSwiperItem().loadStatus = 'loadmore';
								this.getCurSwiperItem().curPage++;
							} else {
								this.getCurSwiperItem().loadStatus = 'nomore';
							}
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
						}
						uni.stopPullDownRefresh(); //停止下拉刷新动画
					})

			},
			/**
			 * tabs通知swiper切换
			 * tab栏切换
			 * @param {Object} index
			 */
			change(index) {
				this.swiperCurrent = index;
			},
			/**
			 * swiper-item左右移动，通知tabs的滑块跟随移动
			 * @param {Object} e
			 */
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.tabs.setDx(dx);
			},
			/**
			 * 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			 * swiper滑动结束，分别设置tabs和swiper的状态
			 * @param {Object} e
			 */
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				if (this.swiperItemList[this.current].itemList.length == 0) {
					this.loadMore()
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		background: #f8f8f8;
	}

	.scrool-page {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	.order {
		width: 710rpx; //宽度
		background-color: #ffffff;
		margin: 20rpx auto; //上下间距
		border-radius: 20rpx; //倒角
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
		box-shadow: 0 2upx 2upx rgba(183, 183, 183, 0.3); //周边阴影

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				width: 90%;

				.box {
					display: flex;

					.test {
						width: 80%;

						.title {
							font-size: 28rpx;
							line-height: 50rpx;
						}

						.number {
							margin: 10rpx 0;
							font-size: 24rpx;
							color: $u-tips-color;
						}
					}

					.right {
						width: 10%;
						margin-left: 10rpx;
						padding-top: 20rpx;
						text-align: right;

						.join {
							width: 100rpx;
							height: 70rpx;
						}
					}
				}

			}


		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
		touch-action: none;
	}

	.swiper-item {
		height: 100%;
		touch-action: none;
	}
</style>
